
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaoyu"></use>
                    </svg>
                    <div class="name">教育</div>
                    <div class="fontclass">#icon-jiaoyu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongzhi"></use>
                    </svg>
                    <div class="name">通知</div>
                    <div class="fontclass">#icon-tongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingfenbiao"></use>
                    </svg>
                    <div class="name">评分表</div>
                    <div class="fontclass">#icon-pingfenbiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qianjin"></use>
                    </svg>
                    <div class="name">前进</div>
                    <div class="fontclass">#icon-qianjin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ordinaryprint"></use>
                    </svg>
                    <div class="name">打印</div>
                    <div class="fontclass">#icon-ordinaryprint</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jixieshebeijizhaomingb"></use>
                    </svg>
                    <div class="name">机械设备及照明_b</div>
                    <div class="fontclass">#icon-jixieshebeijizhaomingb</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-llalbumshopselectorcancel"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-llalbumshopselectorcancel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugai1"></use>
                    </svg>
                    <div class="name">修改</div>
                    <div class="fontclass">#icon-xiugai1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihao"></use>
                    </svg>
                    <div class="name">对号</div>
                    <div class="fontclass">#icon-duihao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-105dubanxiaoxitongjifenxi"></use>
                    </svg>
                    <div class="name">105督办消息统计分析</div>
                    <div class="fontclass">#icon-105dubanxiaoxitongjifenxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconshanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-iconshanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontshezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-iconfontshezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaping"></use>
                    </svg>
                    <div class="name">差评</div>
                    <div class="fontclass">#icon-chaping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-22"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-22</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiala"></use>
                    </svg>
                    <div class="name">下拉</div>
                    <div class="fontclass">#icon-xiala</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuichu2"></use>
                    </svg>
                    <div class="name">退出</div>
                    <div class="fontclass">#icon-tuichu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hetongshouru"></use>
                    </svg>
                    <div class="name">合同收入</div>
                    <div class="fontclass">#icon-hetongshouru</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jian"></use>
                    </svg>
                    <div class="name">减</div>
                    <div class="fontclass">#icon-jian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-msnui-sys-safety"></use>
                    </svg>
                    <div class="name">系统安全</div>
                    <div class="fontclass">#icon-msnui-sys-safety</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jingfeixinxi"></use>
                    </svg>
                    <div class="name">经费信息</div>
                    <div class="fontclass">#icon-jingfeixinxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinlingyingcaiwangtubiao58"></use>
                    </svg>
                    <div class="name">未选中</div>
                    <div class="fontclass">#icon-jinlingyingcaiwangtubiao58</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">闹钟</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-shouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mianxingtubiaoqianjin"></use>
                    </svg>
                    <div class="name">面型图标_前进</div>
                    <div class="fontclass">#icon-mianxingtubiaoqianjin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuyuanjiaoyu"></use>
                    </svg>
                    <div class="name">出院教育</div>
                    <div class="fontclass">#icon-chuyuanjiaoyu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dagou"></use>
                    </svg>
                    <div class="name">打钩</div>
                    <div class="fontclass">#icon-dagou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaping1"></use>
                    </svg>
                    <div class="name">差评</div>
                    <div class="fontclass">#icon-chaping1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconyidongdao"></use>
                    </svg>
                    <div class="name">移动到</div>
                    <div class="fontclass">#icon-iconyidongdao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fa-angle-up"></use>
                    </svg>
                    <div class="name">向上</div>
                    <div class="fontclass">#icon-fa-angle-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuxuankuang"></use>
                    </svg>
                    <div class="name">复选框</div>
                    <div class="fontclass">#icon-fuxuankuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qita"></use>
                    </svg>
                    <div class="name">其他</div>
                    <div class="fontclass">#icon-qita</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaoyupeixun"></use>
                    </svg>
                    <div class="name">教育培训</div>
                    <div class="fontclass">#icon-jiaoyupeixun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongzuotai"></use>
                    </svg>
                    <div class="name">工作台</div>
                    <div class="fontclass">#icon-gongzuotai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibiaoti121"></use>
                    </svg>
                    <div class="name">off</div>
                    <div class="fontclass">#icon-weibiaoti121</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiazhaopian"></use>
                    </svg>
                    <div class="name">添加照片</div>
                    <div class="fontclass">#icon-tianjiazhaopian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">新增</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xunchaguanli"></use>
                    </svg>
                    <div class="name">巡查管理</div>
                    <div class="fontclass">#icon-xunchaguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cha"></use>
                    </svg>
                    <div class="name">差</div>
                    <div class="fontclass">#icon-cha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pugong"></use>
                    </svg>
                    <div class="name">普工</div>
                    <div class="fontclass">#icon-pugong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-onkaiguan"></use>
                    </svg>
                    <div class="name">ON开关</div>
                    <div class="fontclass">#icon-onkaiguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiao01"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#icon-liebiao01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqian"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#icon-biaoqian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaodi"></use>
                    </svg>
                    <div class="name">施工交底</div>
                    <div class="fontclass">#icon-jiaodi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuichu"></use>
                    </svg>
                    <div class="name">退出</div>
                    <div class="fontclass">#icon-tuichu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xueyuanjinlichang"></use>
                    </svg>
                    <div class="name">学员进离场</div>
                    <div class="fontclass">#icon-xueyuanjinlichang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#icon-mima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontrili"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-iconfontrili</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuangjian-copy"></use>
                    </svg>
                    <div class="name">创建</div>
                    <div class="fontclass">#icon-chuangjian-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qbkh"></use>
                    </svg>
                    <div class="name">情报考核</div>
                    <div class="fontclass">#icon-qbkh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-word-copy"></use>
                    </svg>
                    <div class="name">word</div>
                    <div class="fontclass">#icon-word-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaoyijilu-copy"></use>
                    </svg>
                    <div class="name">记录</div>
                    <div class="fontclass">#icon-jiaoyijilu-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengxin"></use>
                    </svg>
                    <div class="name">更新</div>
                    <div class="fontclass">#icon-gengxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodeyewubanli"></use>
                    </svg>
                    <div class="name">我的_业务办理</div>
                    <div class="fontclass">#icon-wodeyewubanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daolushigong-copy"></use>
                    </svg>
                    <div class="name">道路施工</div>
                    <div class="fontclass">#icon-daolushigong-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-prev-arrow"></use>
                    </svg>
                    <div class="name">分页-01</div>
                    <div class="fontclass">#icon-prev-arrow</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-next-arrow"></use>
                    </svg>
                    <div class="name">分页-02</div>
                    <div class="fontclass">#icon-next-arrow</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zonglan"></use>
                    </svg>
                    <div class="name">总览</div>
                    <div class="fontclass">#icon-zonglan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-3"></use>
                    </svg>
                    <div class="name">规章制度1</div>
                    <div class="fontclass">#icon-3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biao"></use>
                    </svg>
                    <div class="name">表</div>
                    <div class="fontclass">#icon-biao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-doubleup-copy"></use>
                    </svg>
                    <div class="name">双箭头</div>
                    <div class="fontclass">#icon-doubleup-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontwancheng"></use>
                    </svg>
                    <div class="name">圆</div>
                    <div class="fontclass">#icon-iconfontwancheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-question"></use>
                    </svg>
                    <div class="name">问题</div>
                    <div class="fontclass">#icon-question</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongji9"></use>
                    </svg>
                    <div class="name">统计9</div>
                    <div class="fontclass">#icon-tongji9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-renyuan"></use>
                    </svg>
                    <div class="name">人员</div>
                    <div class="fontclass">#icon-renyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danweitijian"></use>
                    </svg>
                    <div class="name">单位体检</div>
                    <div class="fontclass">#icon-danweitijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fabugonggao"></use>
                    </svg>
                    <div class="name">发布公告</div>
                    <div class="fontclass">#icon-fabugonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qianjin-copy"></use>
                    </svg>
                    <div class="name">前进</div>
                    <div class="fontclass">#icon-qianjin-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanzhong"></use>
                    </svg>
                    <div class="name">选中</div>
                    <div class="fontclass">#icon-xuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongzhi1"></use>
                    </svg>
                    <div class="name">通知</div>
                    <div class="fontclass">#icon-tongzhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-grgzpt"></use>
                    </svg>
                    <div class="name">个人工作台</div>
                    <div class="fontclass">#icon-grgzpt</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ziliao"></use>
                    </svg>
                    <div class="name">资料</div>
                    <div class="fontclass">#icon-ziliao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-4shigongdiaodu"></use>
                    </svg>
                    <div class="name">4-施工调度</div>
                    <div class="fontclass">#icon-4shigongdiaodu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shigongzhuangtai"></use>
                    </svg>
                    <div class="name">施工状态</div>
                    <div class="fontclass">#icon-shigongzhuangtai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#icon-folder</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tixiguanli"></use>
                    </svg>
                    <div class="name">体系管理</div>
                    <div class="fontclass">#icon-tixiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ziliao1"></use>
                    </svg>
                    <div class="name">资料</div>
                    <div class="fontclass">#icon-ziliao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi-copy"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-xiaoxi-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rongzixuqiushencha01"></use>
                    </svg>
                    <div class="name">融资需求审查</div>
                    <div class="fontclass">#icon-rongzixuqiushencha01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tixing"></use>
                    </svg>
                    <div class="name">提醒</div>
                    <div class="fontclass">#icon-tixing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongchengkaohe"></use>
                    </svg>
                    <div class="name">工程考核</div>
                    <div class="fontclass">#icon-gongchengkaohe</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontzhizuobiaozhun41"></use>
                    </svg>
                    <div class="name">提醒</div>
                    <div class="fontclass">#icon-iconfontzhizuobiaozhun41</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-meitibaodao"></use>
                    </svg>
                    <div class="name">媒体报道</div>
                    <div class="fontclass">#icon-meitibaodao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ziliao2"></use>
                    </svg>
                    <div class="name">资料</div>
                    <div class="fontclass">#icon-ziliao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shebeiweihu"></use>
                    </svg>
                    <div class="name">设备维护</div>
                    <div class="fontclass">#icon-shebeiweihu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinggao"></use>
                    </svg>
                    <div class="name">警告</div>
                    <div class="fontclass">#icon-jinggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuangjiantou-copy"></use>
                    </svg>
                    <div class="name">双箭头</div>
                    <div class="fontclass">#icon-shuangjiantou-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuxuankuangxuanzhong"></use>
                    </svg>
                    <div class="name">复选框－选中</div>
                    <div class="fontclass">#icon-fuxuankuangxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggao"></use>
                    </svg>
                    <div class="name">公告</div>
                    <div class="fontclass">#icon-gonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinruqiyemenhu2"></use>
                    </svg>
                    <div class="name">进入企业门户2</div>
                    <div class="fontclass">#icon-jinruqiyemenhu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mendianziliao"></use>
                    </svg>
                    <div class="name">门店资料</div>
                    <div class="fontclass">#icon-mendianziliao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-yonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoge"></use>
                    </svg>
                    <div class="name">表格</div>
                    <div class="fontclass">#icon-biaoge</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jixie"></use>
                    </svg>
                    <div class="name">机械</div>
                    <div class="fontclass">#icon-jixie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiabeizhu"></use>
                    </svg>
                    <div class="name">添加备注</div>
                    <div class="fontclass">#icon-tianjiabeizhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wentijiaoliu"></use>
                    </svg>
                    <div class="name">问题交流</div>
                    <div class="fontclass">#icon-wentijiaoliu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhuzhongxin"></use>
                    </svg>
                    <div class="name">帮助中心</div>
                    <div class="fontclass">#icon-bangzhuzhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danganyingxiangchaxun"></use>
                    </svg>
                    <div class="name">档案影像查询</div>
                    <div class="fontclass">#icon-danganyingxiangchaxun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                    <div class="name">guanbi</div>
                    <div class="fontclass">#icon-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui1"></use>
                    </svg>
                    <div class="name">返回</div>
                    <div class="fontclass">#icon-fanhui1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinchuhuo"></use>
                    </svg>
                    <div class="name">进出货</div>
                    <div class="fontclass">#icon-jinchuhuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjianjia"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#icon-wenjianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jilu3"></use>
                    </svg>
                    <div class="name">记录3</div>
                    <div class="fontclass">#icon-jilu3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anquanjingbao"></use>
                    </svg>
                    <div class="name">安全警报</div>
                    <div class="fontclass">#icon-anquanjingbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-haopingshuai"></use>
                    </svg>
                    <div class="name">好评率</div>
                    <div class="fontclass">#icon-haopingshuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuangjiancaigoudan"></use>
                    </svg>
                    <div class="name">创建采购单</div>
                    <div class="fontclass">#icon-chuangjiancaigoudan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuichu1"></use>
                    </svg>
                    <div class="name">退出</div>
                    <div class="fontclass">#icon-tuichu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaohe"></use>
                    </svg>
                    <div class="name">考核</div>
                    <div class="fontclass">#icon-kaohe</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-man"></use>
                    </svg>
                    <div class="name">男</div>
                    <div class="fontclass">#icon-man</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chapingyujingshezhi"></use>
                    </svg>
                    <div class="name">差评预警设置</div>
                    <div class="fontclass">#icon-chapingyujingshezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fachugongdan"></use>
                    </svg>
                    <div class="name">发出工单</div>
                    <div class="fontclass">#icon-fachugongdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon01"></use>
                    </svg>
                    <div class="name">待处理</div>
                    <div class="fontclass">#icon-icon01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangxiajiantouhover"></use>
                    </svg>
                    <div class="name">上下箭头hover</div>
                    <div class="fontclass">#icon-shangxiajiantouhover</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-updown-up"></use>
                    </svg>
                    <div class="name">上下箭头hover</div>
                    <div class="fontclass">#icon-updown-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xianchangshigong"></use>
                    </svg>
                    <div class="name">现场施工</div>
                    <div class="fontclass">#icon-xianchangshigong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-banli"></use>
                    </svg>
                    <div class="name">办理</div>
                    <div class="fontclass">#icon-banli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yujing"></use>
                    </svg>
                    <div class="name">预警</div>
                    <div class="fontclass">#icon-yujing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yidu"></use>
                    </svg>
                    <div class="name">已读</div>
                    <div class="fontclass">#icon-yidu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongwenliuzhuan"></use>
                    </svg>
                    <div class="name">公文流转</div>
                    <div class="fontclass">#icon-gongwenliuzhuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-banjixiangce"></use>
                    </svg>
                    <div class="name">相册－实心</div>
                    <div class="fontclass">#icon-banjixiangce</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dengji"></use>
                    </svg>
                    <div class="name">登记</div>
                    <div class="fontclass">#icon-dengji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingtaiguanli"></use>
                    </svg>
                    <div class="name">平台管理</div>
                    <div class="fontclass">#icon-pingtaiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guidang"></use>
                    </svg>
                    <div class="name">归档</div>
                    <div class="fontclass">#icon-guidang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-haoping"></use>
                    </svg>
                    <div class="name">好评</div>
                    <div class="fontclass">#icon-haoping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xitongguanli"></use>
                    </svg>
                    <div class="name">系统管理</div>
                    <div class="fontclass">#icon-xitongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bitian"></use>
                    </svg>
                    <div class="name">必填</div>
                    <div class="fontclass">#icon-bitian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenjian"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-wenjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-woman"></use>
                    </svg>
                    <div class="name">女</div>
                    <div class="fontclass">#icon-woman</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-excel"></use>
                    </svg>
                    <div class="name">表格</div>
                    <div class="fontclass">#icon-excel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-piliang"></use>
                    </svg>
                    <div class="name">批量</div>
                    <div class="fontclass">#icon-piliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofang"></use>
                    </svg>
                    <div class="name">bofang</div>
                    <div class="fontclass">#icon-bofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-renyuanguanli"></use>
                    </svg>
                    <div class="name">人员管理</div>
                    <div class="fontclass">#icon-renyuanguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peixun"></use>
                    </svg>
                    <div class="name">培训</div>
                    <div class="fontclass">#icon-peixun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xueyuanlichang"></use>
                    </svg>
                    <div class="name">学员离场</div>
                    <div class="fontclass">#icon-xueyuanlichang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tijiao"></use>
                    </svg>
                    <div class="name">提交</div>
                    <div class="fontclass">#icon-tijiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoduan"></use>
                    </svg>
                    <div class="name">标段</div>
                    <div class="fontclass">#icon-biaoduan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qipaoxiao"></use>
                    </svg>
                    <div class="name">气泡小</div>
                    <div class="fontclass">#icon-qipaoxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-licheng"></use>
                    </svg>
                    <div class="name">里程</div>
                    <div class="fontclass">#icon-licheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanzhong1"></use>
                    </svg>
                    <div class="name">选中</div>
                    <div class="fontclass">#icon-xuanzhong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou1"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-jiantou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-staff-copy"></use>
                    </svg>
                    <div class="name">人员</div>
                    <div class="fontclass">#icon-staff-copy</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
